<template>
  <div class="box1">
    <el-backtop target=".el-main" :bottom="100" :right="100" ref="backtop" />
    <el-input v-model="targetAdminId" />
    <el-button type="primary" class="iconfont icon-sousuo" @click="logbook()">查找</el-button>
    <div class="box2">
      <el-table :data="tableData" border class="shars">
        <el-table-column prop="id" label="日志ID" width="194" />
        <el-table-column prop="adminId" label="管理员ID" width="194" />
        <el-table-column prop="requestId" label="请求ID" width="194" />
        <el-table-column prop="group" label="API分组" width="194" />
        <el-table-column prop="method" label="API方法" width="194" />
        <el-table-column
          prop="gmtCreate"
          :formatter="dateFormat"
          label="操作时间"
          width="194"
        />
      </el-table>
     
    </div>
     <!-- 分页 -->
     <PaginAtion class="dins" v-bind="paging" @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange"></PaginAtion>
  </div>
</template>
<script>
import moment from "moment";
import http from "@/http";
import PaginAtion from "@/Subassembly/PaginAtion";
import axios from "axios";
export default {
  components: {
    ElConfigProvider,
    PaginAtion
  },
  data() {
    return {
      tableData: [],
      input: "", 
      
      targetAdminId: "",
      paging:{
        page: 1, //默认第一页
        limit: 10, //显示几页
        total:"",
      }
    };
  },
  created() {
    this.logbook();
  },
  methods: {
    //时间戳
    dateFormat(row, column) {
      var date = row[column.property];
      if (date == undefined) {
        return "";
      }
      return moment(date).format("MM月DD日HH时mm分");
    },
    //调用接口
    logbook() {
      let data = {
        _gp: "admin.log",
        _mt: "list",
        targetAdminId: this.targetAdminId,
        page: this.paging.page,
        limit: this.paging.limit,
      };
      http.post(data).then((res) => {
        console.log(res);
        if (200 == res.errno)
          //   console.log(res);
          this.paging.total = res.data.count; //获取数据总页
          this.tableData = res.data.items; //存放数据
      });
    },
    handleSizeChange(val) {
      this.paging.limit = val;
      this.logbook();
    },
    handleCurrentChange(val) {
      this.paging.page = val;
      this.logbook();
    },
  },
};
</script>
<style lang="less" scoped>
.box1 {
  height: 100%;
  /deep/ .el-input {
    display: inline-block;
    width: 180px;
    margin-left: 10px;
    /deep/ .is-vertical {
      height: 100%;
      background-color: red;
      width: 100%;
    }
    /deep/ .el-input__inner {
      width: 170px;
      display: inline-block;
      margin-right: 20px;
    }
    .el-button {
      display: inline-block;
    }
    /deep/ .shars {
      margin-bottom: 30px;
    }
  }
  .box2 {
    margin: auto;
    /deep/ .demo-pagination-block {
      margin-top: 30px;
    }
  }
  .dins{
    margin: 10px 0px;
  }
  .opps {
    margin-top: 20px;
  }
}
</style>
